<!--
 * @Author: your name
 * @Date: 2021-09-19 18:44:31
 * @LastEditTime: 2021-09-25 12:14:56
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup-ej-app\src\views\Order\Order.vue
-->
<template>
  <div class="new">
    <header>
      <van-sticky>
        <van-nav-bar title="疫情资讯" />
      </van-sticky>
    </header>
    <div class="epdemicImg">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img src="@/assets/1.jpeg" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/2.jpeg" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/3.jpeg" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="newWrap">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="articleWrap">
          <div
            class="articleBox"
            v-for="article in articleList"
            :key="article.id"
            @click="toArticle(article.id)"
          >
          <div class="articleInf">
             <div class="articleImg">
              <div style="background-color:purple;height:100%;"></div>
             </div>
             <div class="detail">
               <div class="title">
                 <span style="font-weight:bold">标题：</span>
                 {{article.title}}
               </div>
               <div class="toDetails">点击查看详情></div>
             </div>
          </div>
          </div>
        </div>
      </van-list>
    </div>
    <div style="height: 60px"></div>
  </div>
</template>

<script>
import { post, get } from "@/http/axios";
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      obj: {
        page: 1,
        pageSize: 8,
      },
      articleTotal: 0,
      articleList: [],
      images: ["@/assets/1.jpeg", "@/assets/2.jpeg", "@/assets/3.jpeg"],
    };
  },
  methods: {
    async getarticle() {
      let res = await get("/article/pageQuery", this.obj);
      this.articleTotal = res.data.data.total;
      this.articleList = res.data.data.list;
      console.log(res);
    },
    onLoad() {
      setTimeout(() => {
        // 加载状态结束
        this.loading = false;
        // console.log(this.productData.total);
        //判断 页面数 是否大于数据总数
        if (this.obj.pageSize >= this.articleTotal) {
          this.finished = true;
        }
        // 异步更新数据
        // console.log('load');
        this.obj.pageSize += 8;
        // console.log(this.pageSize);
        this.getarticle();
      }, 3000);
    },
    toArticle(id){
       this.$router.push({
         path:'details',
         query:{
           id
         }
       })
    }
  },
  created() {
    this.getarticle();
  },
};
</script>

<style  scoped>
.my-swipe .van-swipe-item {
  width: 100%;
  height: 200px;
}
.epdemicImg img {
  width: 100%;
  height: 210px;
}
.articleWrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.articleWrap .articleBox {
  border: 1px solid #bcbcbc;
  flex: 1 0 120px;
  border-radius: 5px;
  box-shadow: 5px 5px 10px #bcbcbc;
  margin: 5px 5px;
}
.articleInf{
    height: 100%;
    width: 100%;
    display: flex;
}
.articleInf .articleImg {
  padding: 10px;
  flex: 1;
  box-sizing: border-box;
}
.articleInf .detail {
  color: #c2c3c4;
  flex: 2;
  padding: 10px;
  font-size: 14px;
  position: relative;
}
.articleInf .detail .title {
  height: 40%;
  text-overflow:ellipsis;
  margin-bottom: 5px;
}
.articleInf .detail .toDetails {
  position: absolute;
  bottom: 10px;
  right: 5px;
}
</style>